<script lang="ts" setup>
import { getSechduleDepartmentAPI, getSechduleListAPI } from '@/api/hospital';
import { ScheduleDepartment, ScheduleListType,BookingScheduleList } from '@/api/type/hospital';
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router=useRouter()
const route=useRoute()
//获取预约列表
const ScheduleList=ref<ScheduleDepartment>()
const page=ref<number>(1)
const limit=ref<number>(7)
const total=ref<number>(0)
const getScheduleList=async()=>{
  const res=await getSechduleDepartmentAPI(page.value,limit.value,route.query.hoscode as string,route.query.depcode as string)
  ScheduleList.value=res.data
  total.value=res.data.total
  workDate.value=ScheduleList.value.bookingScheduleList[0]
  showDetail()
}
getScheduleList()

//获取排班数据详情
const ScheduleDetail=ref<ScheduleListType>([])
let workDate=ref<BookingScheduleList>()
const showDetail= async()=>{
  const res=await getSechduleListAPI(
    route.query.hoscode as string,
    route.query.depcode as string,
    workDate.value?.workDate as string)
    ScheduleDetail.value=res.data
  
}
const changeDetail=(value:BookingScheduleList)=>{
  workDate.value=value
  showDetail()
}

//过滤数据
const moringArr=computed(()=>{
  return ScheduleDetail.value.filter(item=>item.workTime===0)
})
const afterArr=computed(()=>{
  return ScheduleDetail.value.filter(item=>item.workTime===1)
})
</script>

<template>
  <div class="schedule">
    <div class="header">
      <span class="header_title">{{ ScheduleList?.baseMap.hosname }}</span>
      <div class="split"></div>
      <span>{{ScheduleList?.baseMap.bigname}}</span>
    </div>
    <div class="title"> 病理科门诊</div>
    <div class="schedule_content">
      <div class="content_title">{{ScheduleList?.baseMap.workDateString}}</div>
      <div class="container" >
        <div class="item" @click="changeDetail(item)"  v-for="(item,index) in ScheduleList?.bookingScheduleList" :class="{active:item.status===-1,cur:item.workDate===workDate?.workDate}" :key="index">
          <div class="top">{{ item.workDate }}{{ item.dayOfWeek }} </div>
          <div class="bottom">{{ item.status===0 ?'有号': item.status===1 ?'即将放号':'停号' }}</div>
        </div>
      </div>
      <div class="pagination">
        <!-- 基础版 -->
        <el-pagination @current-change="getScheduleList"  v-model:current-page="page" layout="prev, pager, next" :total="total" />
      </div>
    </div>
    <div class="schedule_detail">
      <div class="will" v-if="workDate?.status===1">
        <span>22222222</span>放号
      </div>
      <div v-else>
        <div class="doctor" >
          <div class="doctor_title" >
            <svg t="1728550276505" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4593" width="24" height="24"><path d="M998.411205 632.414487H856.208483c-3.438309-92.205005-38.668695-178.424692-100.124372-244.164952-31.611975-33.816177-68.457138-60.381206-109.515253-78.958306-42.618657-19.283182-87.894839-29.060873-134.569881-29.060873-46.675042 0-91.950202 9.777691-134.568859 29.060873-41.058115 18.576077-77.903278 45.14213-109.515252 78.958306-61.455677 65.74026-96.68504 151.959947-100.124372 244.164952H25.588795c-11.30344 0-20.466124 9.162684-20.466124 20.466124s9.162684 20.466124 20.466124 20.466124h972.82241c11.30344 0 20.466124-9.162684 20.466124-20.466124s-9.162684-20.466124-20.466124-20.466124zM512 321.162604c162.737408 0 295.961642 138.298809 303.247582 311.251883H208.752418c7.28594-172.952051 140.510174-311.251883 303.247582-311.251883zM752.817718 771.072477H271.182282c-11.30344 0-20.466124 9.162684-20.466124 20.466124s9.162684 20.466124 20.466124 20.466124h481.635436c11.30344 0 20.466124-9.162684 20.466124-20.466124s-9.162684-20.466124-20.466124-20.466124zM512 264.189008c11.30344 0 20.466124-9.162684 20.466124-20.466124v-130.983194c0-11.30344-9.162684-20.466124-20.466124-20.466123s-20.466124 9.162684-20.466124 20.466123v130.983194c0 11.30344 9.162684 20.466124 20.466124 20.466124zM219.793892 361.477798c3.996011 3.996011 9.233292 5.994528 14.471596 5.994528s10.475586-1.998517 14.471596-5.994528c7.993045-7.993045 7.993045-20.951171 0-28.943192l-92.619444-92.619444c-7.993045-7.993045-20.951171-7.993045-28.943192 0s-7.993045 20.951171 0 28.943192l92.619444 92.619444zM771.996522 367.472326a20.407796 20.407796 0 0 0 14.47262-5.994528l92.619444-92.619444c7.992021-7.993045 7.992021-20.951171 0-28.943192-7.993045-7.993045-20.952194-7.993045-28.944216 0l-92.619444 92.619444c-7.992021 7.993045-7.992021 20.951171 0 28.943192a20.398586 20.398586 0 0 0 14.471596 5.994528z" fill="#4490F1" p-id="4594"></path></svg>
            <span>上午号源</span>
          </div>
          <div class="doctor_content" v-show="workDate?.status===0||workDate?.status===1" >
            <div class="doctor_item" v-for="item in moringArr" :key="item.id">
              <div class="item_detail">
                <div class="detail_title">
                  {{item.title}}
                  <div class="split"></div>
                  {{item.docname}}
                </div>
                <div class="spical">{{ item.skill }}</div>
              </div>
              <div class="item_btn">
                <div class="fee">￥{{ item.amount }}</div>
                <el-button @click="router.push(`booking?scheduleId=${item.id}`)" style="width: 140px;font-weight: 700; " type="primary" size="large">剩余{{item.availableNumber}}</el-button>
              </div>
            </div>
          </div>
      </div>
      <div class="doctor">
          <div class="doctor_title">
            <svg t="1728550155109" class="icon" viewBox="0 0 1044 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3464" width="24" height="24"><path d="M512.607508 807.384615c-163.446154 0-295.384615-131.938462-295.384616-295.384615s131.938462-295.384615 295.384616-295.384615 295.384615 131.938462 295.384615 295.384615-131.938462 295.384615-295.384615 295.384615z m0-78.76923c120.123077 0 216.615385-96.492308 216.615384-216.615385s-96.492308-216.615385-216.615384-216.615385-216.615385 96.492308-216.615385 216.615385 96.492308 216.615385 216.615385 216.615385z" fill="#20A0FF" p-id="3465"></path><path d="M514.576738 0c21.661538 0 39.384615 17.723077 39.384616 39.384615v78.769231c0 21.661538-17.723077 39.384615-39.384616 39.384616s-39.384615-17.723077-39.384615-39.384616V39.384615c0-21.661538 17.723077-39.384615 39.384615-39.384615z m336.738462 122.092308c15.753846 13.784615 19.692308 39.384615 3.938462 55.138461l-51.2 61.046154c-13.784615 15.753846-39.384615 19.692308-55.138462 3.938462-15.753846-13.784615-19.692308-39.384615-3.938462-55.138462l51.2-61.046154c13.784615-15.753846 37.415385-17.723077 55.138462-3.938461z m177.230769 309.16923c3.938462 21.661538-9.846154 41.353846-31.507692 45.292308l-76.8 13.784616c-21.661538 3.938462-41.353846-9.846154-45.292308-31.507693-3.938462-21.661538 9.846154-41.353846 31.507693-45.292307l76.8-13.784616c21.661538-3.938462 41.353846 9.846154 45.292307 31.507692z m-61.046154 350.523077c-11.815385 19.692308-35.446154 25.6-53.16923 13.784616l-68.923077-39.384616c-19.692308-11.815385-25.6-35.446154-13.784616-53.16923s35.446154-25.6 53.169231-13.784616l68.923077 39.384616c17.723077 11.815385 23.630769 35.446154 13.784615 53.16923zM693.776738 1012.184615c-19.692308 7.876923-43.323077-3.938462-51.2-23.630769l-27.56923-74.830769c-7.876923-19.692308 3.938462-43.323077 23.630769-51.2 19.692308-7.876923 43.323077 3.938462 51.2 23.630769l27.569231 74.830769c7.876923 21.661538-3.938462 43.323077-23.63077 51.2z m-356.430769 0c-19.692308-7.876923-31.507692-29.538462-23.630769-51.2l27.569231-74.830769c7.876923-19.692308 29.538462-31.507692 51.2-23.630769 19.692308 7.876923 31.507692 29.538462 23.630769 51.2l-27.569231 74.830769c-7.876923 19.692308-31.507692 31.507692-51.2 23.630769zM63.622892 781.784615c-11.815385-19.692308-3.938462-43.323077 13.784616-53.16923l68.923077-39.384616c19.692308-11.815385 43.323077-3.938462 53.16923 13.784616s3.938462 43.323077-13.784615 53.16923l-68.923077 39.384616c-17.723077 11.815385-43.323077 5.907692-53.169231-13.784616zM0.607508 431.261538c3.938462-21.661538 23.630769-35.446154 45.292307-31.507692l76.8 13.784616c21.661538 3.938462 35.446154 23.630769 31.507693 45.292307-3.938462 21.661538-23.630769 35.446154-45.292308 31.507693l-76.8-13.784616C12.422892 472.615385-3.330954 452.923077 0.607508 431.261538zM179.807508 122.092308c15.753846-13.784615 41.353846-11.815385 55.138461 3.938461l51.2 61.046154c13.784615 15.753846 11.815385 41.353846-3.938461 55.138462-15.753846 13.784615-41.353846 11.815385-55.138462-3.938462L175.869046 177.230769c-15.753846-15.753846-13.784615-41.353846 3.938462-55.138461z" fill="#9AD4FF" p-id="3466"></path></svg>
            <span>下午号源</span>
          </div>
          <div class="doctor_content" v-show="workDate?.status===0||workDate?.status===1">
            <div class="doctor_item" v-for="item in afterArr" :key="item.id">
              <div class="item_detail">
                <div class="detail_title">
                  {{item.title}}
                  <div class="split"></div>
                  {{item.docname}}
                </div>
                <div class="spical">{{item.skill}}</div>
              </div>
              <div class="item_btn">
                <div class="fee">￥{{ item.amount }}</div>
                <el-button @click="router.push(`booking?scheduleId=${item.id}`)"  style="width: 140px;font-weight: 700; " type="primary" size="large">剩余{{ item.availableNumber }}</el-button>
              </div>
            </div>
          </div>
      </div>
      </div>
     
    </div>
  </div>
</template>

<style lang="scss" scoped>
.schedule {
  .header {
    display: flex;
    color: #666;
    font-size: 14px;
    .split {
      margin: 0 10px;
    }
    .header_title:hover {
      color: #4490f1;
      cursor: pointer;
    }
  }
  .title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-top: 20px;
  }
  .schedule_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    cursor: pointer;
    .content_title {
      margin-bottom: 20px;
      color: #333;
      font-size: 14px;
    }
    .container {
      width: 100%;
      display: flex;
      .item {
        flex: 1;
        border: 1px solid skyblue;
        margin: 0 10px;
        color: #4990f1;
        font-size: 14px;
        text-align: center;

        &.active {
          border: 1px solid #ccc;
          color: #7f7f7f;
          .top  {
            background-color: #ccc;
          }
        }
        &.cur {
          transform: scale(1.2);
        }
        .top {
          background-color: #e8f2ff;
          padding: 10px 0;
        }
        .bottom {
          padding: 10px 0;
        }
      }
    }
    .pagination {
      margin-top: 30px;
      padding: 2px 5px;
    }
  }
  .schedule_detail {
    .will {
      text-align: center;
      margin-top: 30px;
      span {
        color: #4490f1;
        font-weight: 700;
        margin-right: 5px;
      }
    }
    .doctor {
      margin-top: 30px;
      .doctor_title {
        display: flex;
        align-items: center;
        svg {
          margin-right: 6px;
        }
        span {
          color: #999;
          font-size: 14px;
        }
      }
      .doctor_content {
        
        .doctor_item {
          display: flex;
          justify-content: space-between;
          .item_detail {
            display: flex;
            flex-direction: column;
            margin-top: 40px;
            .detail_title {
              display: flex;
              font-weight: 700;
              font-size: 14px;
              margin-bottom: 20px;
              .split {
                width: 1px;
                height: 16px;
                margin: 0 10px;
                background-color: #efefef;
              }
            }
            .spical {
              color: #999;
              margin-top: 10px;
              font-size: 14px;
            }
          }
          .item_btn {
            display: flex;
            align-items: center;
            .fee {
              margin-right: 20px;
              color: #4490f1;
              font-size: 14px;

            }
          }
        }
      }
    }
  }
}
</style>